import React, { useState , useEffect } from 'react';
import { Drawer, Button, Space ,Form, Input, InputNumber ,Tree,message,Row, Col } from 'antd';
import { useDispatch,  } from 'react-redux'





export default function AddServeType({size,visible,setVisible,serveType,changeType,changeOneType}) {
const dispatch = useDispatch()
const myRef = React.createRef("");
useEffect(() => {
    handleClear()
    
}, [changeType.title])

const handleClear = function () {
    if(myRef.current){
        console.log(111);
    myRef.current.setValue(changeType.title);  // 就是这个方法呢
  }
}  
const onClose = () => {
    setVisible(false);

}

const [value, setValue] = useState('')

const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  /* eslint-disable no-template-curly-in-string */
  
  const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };
  
 
    const onFinish = () => {
      if(!value){
        message.error("请修改部门名称，因为只能修改部门名称");
      }else{
          if(checkedKeys.checked){
          if(checkedKeys.checked.length != 1  ){
            message.error("请选择一个上级部门");
          }else{
            changeOneType({
                name:value,
                parentId:checkedKeys.checked[0],
                id:changeType.id
            })
            setCheckedKeys([])
          }
        }else{
            message.error("请选择一个上级部门");

        }
      }
    };

    //树组件
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [checkedKeys, setCheckedKeys] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [autoExpandParent, setAutoExpandParent] = useState(true);
  
    const onExpand = (expandedKeysValue) => {
      console.log('onExpand', expandedKeysValue); // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
  
      setExpandedKeys(expandedKeysValue);
      setAutoExpandParent(false);
    };
  
    const onCheck = (checkedKeysValue) => {
      console.log('onCheck', checkedKeysValue);
      setCheckedKeys(checkedKeysValue);
    };
  
    const onSelect = (selectedKeysValue, info) => {
      console.log('onSelect', info);
      setSelectedKeys(selectedKeysValue);
    };
 

    
    return (
        <>
        <Drawer
          title={`修改按钮`}
          placement="right"
          size={size}
          onClose={onClose}
          visible={visible}
          footer={
            <Space style={{marginLeft:"550px"}}>
            <Button onClick={onClose}>取消</Button>
              <Button type="primary" htmlType="submit" onClick={onFinish} >
                确认修改
              </Button>
            </Space>  
        }
        //   extra={}
        >
<Form  name="nest-messages"  validateMessages={validateMessages}>
<Row style={{marginBottom:"10px"}}>
      <Col  span={2.5}> <span style={{lineHeight:"30px",color:"#ff4d4f"}}>*</span>     
      <span style={{lineHeight:"30px",marginRight:"10px"}}>部门名称</span>
</Col>
      <Col span={21}>        
      <Input ref={myRef} maxLength={400} onChange={(e)=>{setValue(e.target.value)}}/>
</Col>
    </Row>
      
      <Form.Item
        name={"shang"}
        label="上级部门"
        rules={[
        ]}
      >
                       <Tree
      checkable
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      checkStrictly={true}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={serveType}
      defaultExpandParent={false}
    />
      </Form.Item>
    </Form>
        </Drawer>

      </>
    )
}